<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>component-4</h1>
	<hr></hr>
	<div id="app">
		<component v-bind:is="who"></component>
		<button v-on:click="changeComponent" v-if="isShow" >{{message}}</button>
		<button v-on:click="changeComponent" v-else="isShow">取消</button>
	</div>
	
	<script type="text/javascript">
		
		var componentA = {
				template:`<div style="color:red">I am ComponentA</div>>`
		}
		
		var componentB = {
				template:`<div style="color:blue">I am ComponentB</div>>`
		}
		
		var componentC = {
				template:`<div style="color:pink">I am ComponentC</div>>`
		}
	
		var app = new Vue({
			
			el:'#app',
			data:{
				message:'确定',
				who:'componentA',
				isShow:true
				
				
			},
			components:{
				"componentA":componentA,
				"componentB":componentB,
				"componentC":componentC
			},
			methods:{
				changeComponent:function(){
					
					if(this.isShow){
						this.isShow=false;
					}else{
						this.isShow=true;
					}
					
					if(this.who=='componentA'){
						this.who = "componentB";
					}else if(this.who=='componentB'){
						this.who = "componentC";
					}else{
						this.who = "componentA"
					}
				}
			}
		});
	</script>
</body>
</html>